<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惊喜彩蛋 | 小糯米一周岁生日</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B9B',
                        secondary: '#6BCBFF',
                        accent: '#FFD66B',
                        purple: '#A78BFA',
                        green: '#6BFFB8'
                    },
                    fontFamily: {
                        cute: ['"Comic Sans MS"', '"Bubblegum Sans"', 'cursive'],
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .surprise-item {
                transition: all 0.3s ease;
                cursor: pointer;
            }
            .surprise-item:hover {
                transform: scale(1.05);
            }
            .gift-box {
                perspective: 1000px;
                cursor: pointer;
            }
            .gift-lid {
                transform-origin: top;
                transition: transform 0.5s ease;
            }
            .gift-box.opened .gift-lid {
                transform: rotateX(-110deg);
            }
            .ribbon {
                z-index: 10;
            }
            .confetti {
                position: absolute;
                width: 10px;
                height: 10px;
                opacity: 0;
            }
            .popper {
                opacity: 0;
                transform: scale(0);
                transition: all 0.3s ease;
                position: absolute;
                z-index: 50;
            }
            .popper.show {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(-10vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(110vh) rotate(720deg);
                opacity: 0;
            }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-50 to-blue-50 min-h-screen font-cute overflow-x-hidden relative">
    <!-- 背景音乐 -->
    <audio id="background-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    <audio id="open-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3" type="audio/mpeg">
    </audio>
    <audio id="celebration-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3" type="audio/mpeg">
    </audio>

    <!-- 装饰元素 -->
    <div class="fixed top-10 right-10 w-20 h-20 bg-primary/20 rounded-full animate-float"></div>
    <div class="fixed bottom-40 left-10 w-24 h-24 bg-secondary/20 rounded-full animate-float" style="animation-delay: 1s;"></div>
    <div class="fixed top-1/2 left-1/4 w-16 h-16 bg-accent/20 rounded-full animate-float" style="animation-delay: 0.5s;"></div>

    <!-- 粒子容器 -->
    <div id="particle-container" class="fixed inset-0 pointer-events-none z-10"></div>

    <!-- 弹窗容器 -->
    <div id="popper-container" class="fixed inset-0 pointer-events-none z-40"></div>

    <!-- 主内容 -->
    <div class="container mx-auto px-4 py-8 relative z-20">
        <!-- 导航 -->
        <nav class="flex justify-between items-center mb-10">
            <a href="index.html" class="text-gray-700 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-home mr-2"></i> 首页
            </a>
            <h1 class="text-2xl md:text-3xl font-bold text-primary">惊喜彩蛋</h1>
            <div class="w-10"></div> <!-- 占位，保持导航平衡 -->
        </nav>

        <!-- 页面标题 -->
        <div class="text-center mb-16">
            <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-primary mb-4">发现惊喜</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">探索这些神秘的礼物盒，发现为小糯米准备的特别惊喜！</p>
        </div>

        <!-- 惊喜礼物盒区域 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
            <!-- 礼物盒1 -->
            <div class="gift-box flex justify-center">
                <div class="relative w-48 h-48">
                    <!-- 礼物盒主体 -->
                    <div class="absolute bottom-0 w-full h-3/4 bg-primary rounded-md"></div>

                    <!-- 礼物盒盖子 -->
                    <div class="gift-lid absolute top-0 w-full h-1/4 bg-primary/90 rounded-t-md border-b-4 border-primary/70"></div>

                    <!-- 丝带 -->
                    <div class="ribbon absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/4 h-full bg-accent"></div>
                    <div class="ribbon absolute top-1/4 left-0 w-full h-1/4 bg-accent"></div>

                    <!-- 丝带结 -->
                    <div class="absolute top-1/6 left-1/2 transform -translate-x-1/2 w-10 h-10 bg-accent rounded-full"></div>

                    <!-- 礼物盒内容 (初始隐藏) -->
                    <div class="absolute bottom-0 left-0 right-0 h-3/4 flex items-center justify-center p-4 opacity-0 transition-opacity" data-surprise="message">
                        <div class="text-center text-white">
                            <i class="fa fa-heart text-4xl mb-2"></i>
                            <p class="font-bold">来自爸爸妈妈的爱</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 礼物盒2 -->
            <div class="gift-box flex justify-center">
                <div class="relative w-48 h-48">
                    <!-- 礼物盒主体 -->
                    <div class="absolute bottom-0 w-full h-3/4 bg-secondary rounded-md"></div>

                    <!-- 礼物盒盖子 -->
                    <div class="gift-lid absolute top-0 w-full h-1/4 bg-secondary/90 rounded-t-md border-b-4 border-secondary/70"></div>

                    <!-- 丝带 -->
                    <div class="ribbon absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/4 h-full bg-purple"></div>
                    <div class="ribbon absolute top-1/4 left-0 w-full h-1/4 bg-purple"></div>

                    <!-- 丝带结 -->
                    <div class="absolute top-1/6 left-1/2 transform -translate-x-1/2 w-10 h-10 bg-purple rounded-full"></div>

                    <!-- 礼物盒内容 (初始隐藏) -->
                    <div class="absolute bottom-0 left-0 right-0 h-3/4 flex items-center justify-center p-4 opacity-0 transition-opacity" data-surprise="photo">
                        <div class="text-center text-white">
                            <i class="fa fa-camera text-4xl mb-2"></i>
                            <p class="font-bold">隐藏照片</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 礼物盒3 -->
            <div class="gift-box flex justify-center">
                <div class="relative w-48 h-48">
                    <!-- 礼物盒主体 -->
                    <div class="absolute bottom-0 w-full h-3/4 bg-accent rounded-md"></div>

                    <!-- 礼物盒盖子 -->
                    <div class="gift-lid absolute top-0 w-full h-1/4 bg-accent/90 rounded-t-md border-b-4 border-accent/70"></div>

                    <!-- 丝带 -->
                    <div class="ribbon absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/4 h-full bg-green"></div>
                    <div class="ribbon absolute top-1/4 left-0 w-full h-1/4 bg-green"></div>

                    <!-- 丝带结 -->
                    <div class="absolute top-1/6 left-1/2 transform -translate-x-1/2 w-10 h-10 bg-green rounded-full"></div>

                    <!-- 礼物盒内容 (初始隐藏) -->
                    <div class="absolute bottom-0 left-0 right-0 h-3/4 flex items-center justify-center p-4 opacity-0 transition-opacity" data-surprise="video">
                        <div class="text-center text-white">
                            <i class="fa fa-video-camera text-4xl mb-2"></i>
                            <p class="font-bold">秘密视频</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 已解锁惊喜 -->
        <div class="max-w-5xl mx-auto mb-16">
            <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">已解锁的惊喜</h3>

            <div id="unlocked-surprises" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 解锁的惊喜将在这里显示 -->
                <div class="col-span-full text-center py-12 text-gray-500">
                    <i class="fa fa-gift text-5xl text-gray-300 mb-4"></i>
                    <p>打开礼物盒解锁惊喜</p>
                </div>
            </div>
        </div>

        <!-- 提示 -->
        <div class="max-w-2xl mx-auto bg-white rounded-xl p-6 shadow-md border border-gray-100">
            <h4 class="text-xl font-bold text-primary mb-4 flex items-center">
                <i class="fa fa-lightbulb-o mr-2"></i> 小提示
            </h4>
            <p class="text-gray-600">每个礼物盒都藏着不同的惊喜，点击它们来解锁。全部解锁后会有特别的庆祝效果哦！</p>
        </div>
    </div>

    <script>
        // 惊喜数据
        let surprisesData = null;
        let unlockedSurprises = [];

        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载惊喜数据
            fetch('data/content.json')
                .then(response => {
                    if (!response.ok) throw new Error('数据加载失败');
                    return response.json();
                })
                .then(data => {
                    surprisesData = data.surprises;

                    // 从本地存储加载已解锁的惊喜
                    const savedUnlocked = localStorage.getItem('unlockedSurprises');
                    if (savedUnlocked) {
                        unlockedSurprises = JSON.parse(savedUnlocked);
                        updateUnlockedSurprises();
                    }

                    // 初始化礼物盒点击事件
                    initGiftBoxes();
                })
                .catch(error => {
                    console.error('初始化失败:', error);
                    alert('页面加载失败，请刷新重试');
                });

            // 播放背景音乐
            const music = document.getElementById('background-music');
            music.volume = 0.3;
            music.play().catch(e => {
                console.log('需要用户交互才能播放音乐:', e);
                document.addEventListener('click', () => {
                    music.play();
                }, { once: true });
            });
        });

        // 初始化礼物盒点击事件
        function initGiftBoxes() {
            const giftBoxes = document.querySelectorAll('.gift-box');

            giftBoxes.forEach(box => {
                box.addEventListener('click', function() {
                    // 如果已经打开，则返回
                    if (this.classList.contains('opened')) return;

                    // 标记为已打开
                    this.classList.add('opened');

                    // 显示内容
                    const content = this.querySelector('[data-surprise]');
                    content.style.opacity = '1';

                    // 获取惊喜类型
                    const surpriseType = content.dataset.surprise;

                    // 记录已解锁的惊喜
                    if (!unlockedSurprises.includes(surpriseType)) {
                        unlockedSurprises.push(surpriseType);
                        localStorage.setItem('unlockedSurprises', JSON.stringify(unlockedSurprises));

                        // 显示惊喜弹窗
                        showSurprise(surpriseType);

                        // 更新已解锁列表
                        updateUnlockedSurprises();

                        // 播放音效
                        document.getElementById('open-sound').play();

                        // 创建彩屑效果
                        createConfetti();

                        // 检查是否全部解锁
                        if (unlockedSurprises.length === Object.keys(surprisesData).length) {
                            setTimeout(() => {
                                celebrateAllUnlocked();
                            }, 1000);
                        }
                    }
                });
            });
        }

        // 显示惊喜弹窗
        function showSurprise(type) {
            const surprise = surprisesData[type];
            const container = document.getElementById('popper-container');

            // 创建弹窗
            const popper = document.createElement('div');
            popper.className = 'popper bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4';

            // 根据惊喜类型设置内容
            let content = '';
            if (type === 'message') {
                content = `
                    <div class="p-6">
                        <div class="text-center mb-4">
                            <div class="w-16 h-16 bg-primary rounded-full mx-auto flex items-center justify-center mb-4">
                                <i class="fa fa-heart text-white text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-primary">${surprise.title}</h3>
                        </div>
                        <div class="text-gray-700 mb-6">${surprise.content}</div>
                        <button class="close-popper w-full bg-primary text-white font-bold py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors">
                            关闭
                        </button>
                    </div>
                `;
            } else if (type === 'photo') {
                content = `
                    <div class="p-6">
                        <div class="text-center mb-4">
                            <div class="w-16 h-16 bg-secondary rounded-full mx-auto flex items-center justify-center mb-4">
                                <i class="fa fa-camera text-white text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-primary">${surprise.title}</h3>
                        </div>
                        <div class="mb-4 rounded-lg overflow-hidden">
                            <img src="${surprise.url}" alt="${surprise.title}" class="w-full h-auto">
                        </div>
                        <p class="text-gray-600 text-sm mb-6">${surprise.description}</p>
                        <button class="close-popper w-full bg-secondary text-white font-bold py-2 px-4 rounded-lg hover:bg-secondary/90 transition-colors">
                            关闭
                        </button>
                    </div>
                `;
            } else if (type === 'video') {
                content = `
                    <div class="p-6">
                        <div class="text-center mb-4">
                            <div class="w-16 h-16 bg-accent rounded-full mx-auto flex items-center justify-center mb-4">
                                <i class="fa fa-video-camera text-white text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-primary">${surprise.title}</h3>
                        </div>
                        <div class="aspect-video rounded-lg overflow-hidden bg-gray-900 mb-4">
                            <video controls class="w-full h-full object-cover">
                                <source src="${surprise.url}" type="video/mp4">
                                您的浏览器不支持视频播放
                            </video>
                        </div>
                        <p class="text-gray-600 text-sm mb-6">${surprise.description}</p>
                        <button class="close-popper w-full bg-accent text-white font-bold py-2 px-4 rounded-lg hover:bg-accent/90 transition-colors">
                            关闭
                        </button>
                    </div>
                `;
            }

            popper.innerHTML = content;
            container.appendChild(popper);

            // 居中显示
            const popperRect = popper.getBoundingClientRect();
            popper.style.top = `calc(50% - ${popperRect.height / 2}px)`;
            popper.style.left = `calc(50% - ${popperRect.width / 2}px)`;

            // 显示弹窗
            setTimeout(() => {
                popper.classList.add('show');
            }, 100);

            // 关闭按钮事件
            popper.querySelector('.close-popper').addEventListener('click', function() {
                popper.classList.remove('show');
                setTimeout(() => {
                    popper.remove();
                }, 300);
            });
        }

        // 更新已解锁的惊喜列表
        function updateUnlockedSurprises() {
            const container = document.getElementById('unlocked-surprises');

            // 如果没有解锁的惊喜
            if (unlockedSurprises.length === 0) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-12 text-gray-500">
                        <i class="fa fa-gift text-5xl text-gray-300 mb-4"></i>
                        <p>打开礼物盒解锁惊喜</p>
                    </div>
                `;
                return;
            }

            // 清空容器
            container.innerHTML = '';

            // 添加已解锁的惊喜
            unlockedSurprises.forEach(type => {
                const surprise = surprisesData[type];
                const item = document.createElement('div');
                item.className = 'bg-white rounded-xl shadow-md p-4 flex items-center';

                let icon, color;
                if (type === 'message') {
                    icon = 'fa-heart';
                    color = 'text-primary';
                } else if (type === 'photo') {
                    icon = 'fa-camera';
                    color = 'text-secondary';
                } else if (type === 'video') {
                    icon = 'fa-video-camera';
                    color = 'text-accent';
                }

                item.innerHTML = `
                    <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4 ${color}">
                        <i class="fa ${icon} text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800">${surprise.title}</h4>
                        <p class="text-gray-500 text-sm">已解锁</p>
                    </div>
                `;

                container.appendChild(item);
            });
        }

        // 全部解锁后的庆祝效果
        function celebrateAllUnlocked() {
            // 播放庆祝音乐
            document.getElementById('celebration-sound').play();

            // 创建大量彩屑
            for (let i = 0; i < 300; i++) {
                createConfetti();
            }

            // 显示庆祝弹窗
            const container = document.getElementById('popper-container');
            const popper = document.createElement('div');
            popper.className = 'popper bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4';

            popper.innerHTML = `
                <div class="p-6 text-center">
                    <div class="w-20 h-20 bg-gradient-to-r from-primary to-secondary rounded-full mx-auto flex items-center justify-center mb-6 animate-pulse">
                        <i class="fa fa-trophy text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-primary mb-4">恭喜！</h3>
                    <p class="text-gray-700 mb-6">你已经解锁了所有惊喜！感谢你参与小糯米的一岁生日庆祝活动。</p>
                    <button id="final-close" class="w-full bg-gradient-to-r from-primary to-secondary text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition-opacity">
                        太棒了！
                    </button>
                </div>
            `;

            container.appendChild(popper);

            // 居中显示
            const popperRect = popper.getBoundingClientRect();
            popper.style.top = `calc(50% - ${popperRect.height / 2}px)`;
            popper.style.left = `calc(50% - ${popperRect.width / 2}px)`;

            // 显示弹窗
            setTimeout(() => {
                popper.classList.add('show');
            }, 100);

            // 关闭按钮事件
            popper.querySelector('#final-close').addEventListener('click',